/*
 * @Author: xiaosihan 
 * @Date: 2024-06-21 07:32:02 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-06-21 08:14:31
 */

import { CloseCircleOutlined } from "@ant-design/icons";
import homeStore from "@views/home/homeStore";
import { autorun } from "mobx";
import { ReactNode, useEffect, useState } from "react";
import styles from "./infoModal.module.less";
import clsx from "clsx";

interface Iprops {
    children?: ReactNode
}

// 信息弹窗
export default function InfoModal() {

    const [activeId, setActiveId] = useState(homeStore.activeId);
    const [name, setName] = useState(homeStore.activeName);
    const [activeSize, setActiveSize] = useState(homeStore.activeSize);
    const [activePosition, setActivePosition] = useState(homeStore.activePosition);

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {
        setActiveId(homeStore.activeId);
        setName(homeStore.activeName);
        setActiveSize(homeStore.activeSize);
        setActivePosition(homeStore.activePosition);
    }), []);

    // 关闭弹窗
    const close = () => {
        homeStore.setActiveId("");
    }

    return (
        <div className={clsx(styles.infoModal, activeId && styles.show)} >

            <CloseCircleOutlined className={styles.close} onClick={() => close()} />

            <div className={styles.row} >
                <span className={styles.lable} >ID :&nbsp;</span>
                <span className={styles.value} >{activeId}</span>
            </div>

            <div className={styles.row} >
                <span className={styles.lable} >名称 :&nbsp;</span>
                <span className={styles.value} >{name}</span>
            </div>

            <div className={styles.row} >
                <span className={styles.lable} >尺寸 :&nbsp;</span>
                <span className={styles.value} >{JSON.stringify(activeSize)}</span>
            </div>
            <div className={styles.row} >
                <span className={styles.lable} >位置 :&nbsp;</span>
                <span className={styles.value} >{JSON.stringify(activePosition)}</span>
            </div>
        </div>
    );

}